<template>
  <div ref="box" @scroll="onScroll" class="article-list">
    <!--
      isLoading：用来标记当前是否加载中，当你下拉时会自动把它变为true，所以加载完数据记得手动把它改为false
      onRefresh：当你下拉时调用，所以把刷新数据写到这里面
     -->
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
    <!--
        v-model绑定的loading，用来标记当前是否正在加载状态，
        如果它为true，底部就会有个加载中的状态，加载中的状态不会调用onLoad去加载新的数据
        当onLoad它会自动变为true，所以如果本次数据加载完了，要把他设置为false，
        不然不会加载下一次数据，会一直显示加载中，而且默认应该给false，不然一次都不加载

        finished： 代表标记是否全部加载完成，默认应该是false，不然也是一次都不会加载
                但是早晚有一天会加载完，所以要把它改成true

        load事件绑定的onLoad方法，是专门用来加载数据的方法
            它在loading和finished都为false的情况，会自动调用
            如果这次调用能够铺满这一屏，它就会停止，除非你往上滑动才会继续调用
            如果没铺满这一屏，会继续调用，直到铺满这一屏或者完全数据加载完毕
     -->
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <van-cell @click="$router.push(`/article/${item.art_id}`)" v-for="item in list" :key="item.art_id" :title="item.title">
        <template #title>
          <div class="title">{{ item.title }}</div>
          <!-- 图片 -->
          <van-grid :border="false" :column-num="item.cover.type">
            <van-grid-item v-for="(pic, index) in item.cover.images" :key="index">
              <van-image :src="pic" />
            </van-grid-item>

          </van-grid>
          <div class="info-box">
            <span>{{ item.aut_name }}</span>
            <span>{{ item.comm_count}}评论</span>
            <span>{{ $relvTime(item.pubdate) }}</span>

            <van-icon style="float:right;" name="cross" />
          </div>
        </template>
      </van-cell>
    </van-list>
  </van-pull-refresh>
  </div>
</template>

<script>
// 导入接口
import { articleListAPI } from '@/api/article'
export default {
  props: {
    channel_id: {
      required: true
    }
  },
  data () {
    return {
      list: [],
      loading: false,
      finished: false,
      timestamp: Date.now(),
      isLoading: false,
      scrollTop: 0
    }
  },
  methods: {
    onScroll () {
      // 把当前滚动条记录起来
      this.scrollTop = this.$refs.box.scrollTop
    },
    async onLoad () {
      const res = await articleListAPI({
        channel_id: this.channel_id,
        // 传当前时间戳代表查最新文章
        timestamp: this.timestamp
      })

      // 把上一个时间段的时间戳存起来
      this.timestamp = res.data.pre_timestamp
      // this.list = res.data.results
      // 要追加所以用push，并且要加数组里的每一条所以要展开
      this.list.push(...res.data.results)
      // 加载完数据要把loading改为false
      this.loading = false
      // 判断是否全部加载完成
      if (this.timestamp == null) {
        this.finished = true
      }
    },

    async onRefresh () {
      // 每次下拉都应该把finished改为false
      this.finished = false
      // 发请求
      const res = await articleListAPI({
        channel_id: this.channel_id,
        // 因为下拉刷新，就是为了拿最新的新闻，所以写死当前时间戳
        timestamp: Date.now()
      })
      // 存到数组里,这时候要用赋值
      // 因为需要把原数据给替换掉
      this.list = res.data.results
      // 刷新完数据记得把isLoading设置为false
      this.isLoading = false

      // 把pre_time存起来
      this.timestamp = res.data.pre_timestamp
    }
  },

  activated () {
    // 把保存的滚出去的距离，再交给div的scrollTop
    this.$refs.box.scrollTop = this.scrollTop
  }
}
</script>

<style lang="less" scoped>
.article-list {
  position: fixed;
  width: 100%;
  top: 90px;
  bottom: 50px;
  overflow: auto;

  .pic {
    width: 100%;
    height: 120px;
  }

  .info-box {
    span {
      color: gray;
      font-size: 12px;
      &:nth-of-type(2) {
        margin: 0 15px;
      }
    }
  }
}
</style>
